<!DOCTYPE html>
<html>
<head>
    <title>AI 视频流</title>
</head>
<body>
    <h1>视频显示</h1>
    <div>
        <button onclick="setMode('raw')">显示原始视频</button>
        <button onclick="setMode('ai')">显示识别视频</button>
    </div>
    <img id="video" width="640" height="480" />
    <script>
        const ws = new WebSocket("ws://192.168.123.18/ws");
        const img = document.getElementById("video");

        ws.onmessage = (event) => {
            const imageBlob = atob(event.data);
            const byteArray = new Uint8Array(imageBlob.length);
            for (let i = 0; i < imageBlob.length; i++) {
                byteArray[i] = imageBlob.charCodeAt(i);
            }
            const blob = new Blob([byteArray], { type: 'image/jpeg' });
            img.src = URL.createObjectURL(blob);
        };

        function setMode(mode) {
            ws.send(mode);
        }
    </script>
</body>
</html>
